<template>
	<view class="home">
		<view class="search-bar">
			<input class="search-input" type="text" v-model="keyword" placeholder="搜索商品或分类" confirm-type="search" @confirm="handleSearch" />
			<button class="search-btn" type="default" @click="handleSearch">搜索</button>
		</view>

		<swiper class="ad-swiper" circular autoplay interval="3500" duration="500">
			<swiper-item v-for="ad in adList" :key="ad.id">
				<image class="ad-image" :src="getImageUrl(ad.imageUrl || ad.image)" mode="aspectFill" />
			</swiper-item>
		</swiper>

		<view class="quick-nav">
			<view class="nav-item" v-for="nav in navList" :key="nav.id" @click="goNav(nav)">
				<image class="nav-icon" :src="nav.icon" mode="aspectFit"></image>
				<text class="nav-text">{{nav.label}}</text>
			</view>
		</view>

		<view class="section-header">
			<text class="section-title">推荐商品</text>
		</view>
		<view class="product-list">
			<view class="product" v-for="p in products" :key="p.id" @click="goDetail(p.id)">
				<image class="cover" :src="getImageUrl(p.coverImage)" mode="aspectFill" />
				<view class="info">
					<text class="title">{{p.title}}</text>
					<text class="price">¥{{p.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data() {
		return {
			keyword: '',
			adList: [],
			navList: [
				{ id: 'category', label: '分类大全', icon: '/static/assets/icons/cascades.png', url: '/pages/category/index' },
				{ id: 'recommend', label: '智能推荐', icon: '/static/assets/icons/appreciate.png', url: '/pages/recommend/index' },
				{ id: 'checkin', label: '签到好礼', icon: '/static/assets/icons/location.png', url: '/pages/coupon/index' },
				{ id: 'member', label: '会员中心', icon: '/static/assets/icons/vip.png', url: '/pages/member/index' },
				{ id: 'community', label: '社区互动', icon: '/static/assets/icons/friend.png', url: '/pages/community/index' },
				{ id: 'postFavorite', label: '帖子收藏', icon: '/static/assets/icons/favor.png', url: '/pages/post-favorite/index' },
				{ id: 'cart', label: '购物车', icon: '/static/assets/icons/cart.png', url: '/pages/cart/index' },
				{ id: 'profile', label: '个人中心', icon: '/static/assets/icons/profile.png', url: '/pages/profile/index' }
			],
			products: []
		}
	},
	onLoad() {
		this.loadBanners();
		this.loadProducts();
	},
	methods: {
		async loadBanners() {
			const res = await api.getBanners();
			if (res.code === 0) {
				this.adList = res.data || [];
			} else {
				this.adList = [];
			}
		},
		handleSearch() {
			if (!this.keyword.trim()) {
				uni.showToast({ icon: 'none', title: '请输入搜索关键词' });
				return;
			}
			uni.navigateTo({ url: `/pages/search/index?keyword=${encodeURIComponent(this.keyword)}` });
		},
		async loadProducts() {
			const params = { pageNum: 1, pageSize: 20 };
			if (this.keyword) params.keyword = this.keyword;
			const res = await api.getProducts(params);
			if (res.code === 0) {
				this.products = res.data.records || [];
			} else {
				uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
			}
		},
		goNav(nav) {
			if (!nav.url) {
				uni.showToast({ title: '敬请期待', icon: 'none' });
				return;
			}
			
			// tabBar页面列表
			const tabBarPages = [
				'/pages/index/index',
				'/pages/category/index',
				'/pages/community/index',
				'/pages/cart/index',
				'/pages/profile/index'
			];
			
			// 判断是否为tabBar页面
			if (tabBarPages.includes(nav.url)) {
				uni.switchTab({ url: nav.url });
			} else {
				uni.navigateTo({ url: nav.url });
			}
		},
		goDetail(id) {
			uni.navigateTo({ url: `/pages/product/detail?id=${id}` });
		},
		getImageUrl(url) {
			if (!url) return '/static/logo.png';
			if (url.startsWith('http')) return url;
			return BASE_URL + url;
		}
	}
}
</script>

<style>
.home { padding: 24rpx; background-color: #F0F7FF; min-height: 100vh; }
.search-bar { display: flex; align-items: center; background: #fff; border-radius: 999rpx; padding: 10rpx 20rpx; box-shadow: 0 4rpx 16rpx rgba(91,155,213,.1); margin-bottom: 24rpx; }
.search-input { flex: 1; font-size: 28rpx; padding-right: 20rpx; }
.search-btn { font-size: 28rpx; color: #fff; background: linear-gradient(135deg,#5B9BD5,#7BB3E8); border: none; border-radius: 999rpx; padding: 10rpx 34rpx; }
.ad-swiper { height: 320rpx; border-radius: 20rpx; overflow: hidden; margin-bottom: 32rpx; }
.ad-image { width: 100%; height: 100%; background: #E8F2FF; }
.quick-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 28rpx; margin-bottom: 32rpx; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 20rpx; padding: 18rpx 8rpx; box-shadow: 0 4rpx 16rpx rgba(91,155,213,.08); }
.nav-icon { width: 70rpx; height: 70rpx; margin-bottom: 12rpx; }
.nav-text { font-size: 24rpx; color: #4A6FA5; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; padding: 0 4rpx; }
.section-title { font-size: 34rpx; font-weight: 600; color: #2C5F8D; }
.product-list { display: flex; flex-wrap: wrap; gap: 20rpx; }
.product { width: calc(50% - 10rpx); background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(91,155,213,.08); }
.cover { width: 100%; height: 320rpx; background: #E8F2FF; }
.info { padding: 20rpx; }
.title { display: block; font-size: 28rpx; color: #2C5F8D; }
.price { display: block; color: #FF4D4F; margin-top: 10rpx; font-weight: 600; }
</style>
